<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单支付 - 影院订票系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .payment-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 0;
        }
        .order-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .movie-poster {
            width: 100px;
            height: 140px;
            object-fit: cover;
            border-radius: 8px;
        }
        .payment-methods {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }
        .payment-method {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .payment-method:hover {
            border-color: #667eea;
        }
        .payment-method.selected {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }
        .payment-method input[type="radio"] {
            display: none;
        }
        .payment-icon {
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }
        .countdown {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 2rem;
            text-align: center;
        }
        .countdown-time {
            font-size: 1.5rem;
            font-weight: bold;
            color: #dc3545;
        }
        .btn-pay {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            border: none;
            border-radius: 10px;
            padding: 15px 30px;
            font-weight: 600;
            font-size: 1.1rem;
        }
        .btn-cancel {
            background: #6c757d;
            border: none;
            border-radius: 10px;
            padding: 15px 30px;
            font-weight: 600;
        }
        .seat-info {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin-top: 1rem;
        }
        .seat-badge {
            background: #667eea;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.9rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            display: inline-block;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="${pageContext.request.contextPath}/movies">
                <i class="fas fa-film me-2"></i>影院订票系统
            </a>
            
            <div class="navbar-nav ms-auto">
                <div class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                        <i class="fas fa-user me-1"></i>${sessionScope.user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/user/orders">
                            <i class="fas fa-ticket-alt me-2"></i>我的订单
                        </a></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>

    <!-- 支付头部 -->
    <section class="payment-header">
        <div class="container">
            <h2><i class="fas fa-credit-card me-2"></i>订单支付</h2>
            <p class="mb-0">请在规定时间内完成支付，超时订单将自动取消</p>
        </div>
    </section>

    <div class="container mt-4">
        <!-- 错误信息 -->
        <c:if test="${not empty error}">
            <div class="alert alert-danger" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i>${error}
            </div>
        </c:if>

        <!-- 倒计时 -->
        <div class="countdown">
            <div class="mb-2">
                <i class="fas fa-clock me-2"></i>订单剩余支付时间
            </div>
            <div class="countdown-time" id="countdown">
                计算中...
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <!-- 订单信息 -->
                <div class="order-card">
                    <h5 class="mb-3">
                        <i class="fas fa-file-invoice me-2"></i>订单信息
                    </h5>
                    
                    <div class="row">
                        <div class="col-md-3">
                            <img src="${order.showtime.movie.posterUrl != null ? order.showtime.movie.posterUrl : '/images/default-poster.jpg'}" 
                                 class="movie-poster" alt="${order.showtime.movie.title}">
                        </div>
                        <div class="col-md-9">
                            <h6 class="mb-2">${order.showtime.movie.title}</h6>
                            
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <small class="text-muted">影院：</small>
                                    <span>${order.showtime.cinema.name}</span>
                                </div>
                                <div class="col-sm-6">
                                    <small class="text-muted">影厅：</small>
                                    <span>${order.showtime.hall.name}</span>
                                </div>
                            </div>
                            
                            <div class="row mb-2">
                                <div class="col-sm-6">
                                    <small class="text-muted">场次：</small>
                                    <span>
                                        <fmt:formatDate value="${order.showtime.showDate}" pattern="MM月dd日"/>
                                        <fmt:formatDate value="${order.showtime.showTime}" pattern="HH:mm"/>
                                    </span>
                                </div>
                                <div class="col-sm-6">
                                    <small class="text-muted">票数：</small>
                                    <span>${order.ticketCount}张</span>
                                </div>
                            </div>
                            
                            <div class="seat-info">
                                <small class="text-muted d-block mb-2">座位信息：</small>
                                <c:forEach var="orderSeat" items="${order.orderSeats}">
                                    <span class="seat-badge">
                                        ${orderSeat.seat.rowNum}排${orderSeat.seat.seatNum}座
                                    </span>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <small class="text-muted">订单号：</small>
                            <span class="fw-bold">${order.orderNo}</span>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <small class="text-muted">订单金额：</small>
                            <span class="fs-4 fw-bold text-danger">¥${order.totalAmount}</span>
                        </div>
                    </div>
                </div>

                <!-- 支付方式 -->
                <div class="payment-methods">
                    <h5 class="mb-3">
                        <i class="fas fa-wallet me-2"></i>选择支付方式
                    </h5>
                    
                    <form action="${pageContext.request.contextPath}/user/payment" method="post" id="paymentForm">
                        <input type="hidden" name="action" value="pay">
                        <input type="hidden" name="orderNo" value="${order.orderNo}">
                        
                        <div class="payment-method" onclick="selectPaymentMethod('alipay')">
                            <input type="radio" name="paymentMethod" value="alipay" id="alipay">
                            <div class="d-flex align-items-center">
                                <div class="payment-icon text-primary me-3">
                                    <i class="fab fa-alipay"></i>
                                </div>
                                <div>
                                    <div class="fw-bold">支付宝</div>
                                    <small class="text-muted">推荐使用支付宝快捷支付</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="payment-method" onclick="selectPaymentMethod('wechat')">
                            <input type="radio" name="paymentMethod" value="wechat" id="wechat">
                            <div class="d-flex align-items-center">
                                <div class="payment-icon text-success me-3">
                                    <i class="fab fa-weixin"></i>
                                </div>
                                <div>
                                    <div class="fw-bold">微信支付</div>
                                    <small class="text-muted">使用微信扫码支付</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="payment-method" onclick="selectPaymentMethod('bank')">
                            <input type="radio" name="paymentMethod" value="bank" id="bank">
                            <div class="d-flex align-items-center">
                                <div class="payment-icon text-info me-3">
                                    <i class="fas fa-credit-card"></i>
                                </div>
                                <div>
                                    <div class="fw-bold">银行卡</div>
                                    <small class="text-muted">支持各大银行储蓄卡和信用卡</small>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <label class="form-label">支付密码</label>
                            <input type="password" class="form-control" name="paymentPassword" 
                                   placeholder="请输入支付密码（测试密码：123456）" required>
                            <small class="text-muted">为了您的资金安全，请输入支付密码</small>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="col-lg-4">
                <!-- 支付操作 -->
                <div class="order-card">
                    <h6 class="mb-3">支付确认</h6>
                    
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>票价</span>
                            <span>¥${order.showtime.price} × ${order.ticketCount}</span>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between fw-bold">
                            <span>应付金额</span>
                            <span class="text-danger">¥${order.totalAmount}</span>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-success btn-pay" onclick="submitPayment()" id="payBtn" disabled>
                            <i class="fas fa-lock me-2"></i>确认支付
                        </button>
                        
                        <button type="button" class="btn btn-secondary btn-cancel" onclick="cancelOrder()">
                            <i class="fas fa-times me-2"></i>取消订单
                        </button>
                    </div>
                    
                    <div class="mt-3 text-center">
                        <small class="text-muted">
                            <i class="fas fa-shield-alt me-1"></i>
                            支付安全由银行级加密保护
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 倒计时
        const expireTime = new Date('${order.expireTime}').getTime();
        
        function updateCountdown() {
            const now = new Date().getTime();
            const timeLeft = expireTime - now;
            
            if (timeLeft <= 0) {
                $('#countdown').text('订单已过期');
                $('#payBtn').prop('disabled', true).text('订单已过期');
                return;
            }
            
            const minutes = Math.floor(timeLeft / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
            
            $('#countdown').text(minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'));
        }
        
        // 每秒更新倒计时
        updateCountdown();
        setInterval(updateCountdown, 1000);
        
        // 选择支付方式
        function selectPaymentMethod(method) {
            $('.payment-method').removeClass('selected');
            $('#' + method).prop('checked', true);
            $('#' + method).closest('.payment-method').addClass('selected');
            $('#payBtn').prop('disabled', false);
        }
        
        // 提交支付
        function submitPayment() {
            const paymentMethod = $('input[name="paymentMethod"]:checked').val();
            const paymentPassword = $('input[name="paymentPassword"]').val();
            
            if (!paymentMethod) {
                alert('请选择支付方式');
                return;
            }
            
            if (!paymentPassword) {
                alert('请输入支付密码');
                return;
            }
            
            $('#payBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i>支付中...');
            
            // 提交表单
            $('#paymentForm').submit();
        }
        
        // 取消订单
        function cancelOrder() {
            if (confirm('确定要取消订单吗？取消后需要重新下单。')) {
                const form = $('<form>', {
                    method: 'post',
                    action: '${pageContext.request.contextPath}/user/payment'
                });
                
                form.append($('<input>', {
                    type: 'hidden',
                    name: 'action',
                    value: 'cancel'
                }));
                
                form.append($('<input>', {
                    type: 'hidden',
                    name: 'orderNo',
                    value: '${order.orderNo}'
                }));
                
                $('body').append(form);
                form.submit();
            }
        }
    </script>
</body>
</html>
